<template>
    <div class="flex h-full flex-col dark:bg-gray-800 w-screen items-center md:h-full">
        <!-- 这是文章的一些说明 -->
        <div class="p-12">
            <div class=" text-3xl md:text-5xl font-medium text-gray-800 dark:text-gray-100 mb-4 leading-tight">
                《Linux中samba的部署及gdb命令调试》
            </div>
            <div class="">

                <div class="flex flex-wrap items-center text-sm text-gray-500 dark:text-gray-400 gap-4">
                    <!-- 作者 -->
                    <div class="flex items-center group">
                        <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                        <span class="group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors">
                            {{ artiles.author }}
                        </span>
                    </div>

                    <!-- 分隔竖线 -->
                    <div class="h-4 w-px bg-gray-200 dark:bg-gray-600"></div>

                    <!-- 发布时间 -->
                    <div class="flex items-center group">
                        <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <span class="group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors">
                            {{ artiles.time }}
                        </span>
                    </div>

                    <!-- 分隔竖线 -->
                    <div class="h-4 w-px bg-gray-200 dark:bg-gray-600"></div>

                    <!-- 标签 -->
                    <div class="flex items-center group">
                        <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M7 7h.01M7 3h5a2 2 0 012 2v5.82a5 5 0 00.629 2.507l2.881 4.192a.999.999 0 01-.813 1.589H7a2 2 0 01-2-2V5a2 2 0 012-2z" />
                        </svg>
                        <span class="group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors">
                            {{ artiles.tags }}
                        </span>
                    </div>

                    <!-- 分隔竖线 -->
                    <div class="h-4 w-px bg-gray-200 dark:bg-gray-600"></div>

                    <!-- 浏览量 -->
                    <div class="flex items-center group">
                        <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                        <span class="group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors">
                            {{ artiles.viewCount }}
                        </span>
                    </div>

                    <!-- 分隔竖线 -->
                    <div class="h-4 w-px bg-gray-200 dark:bg-gray-600"></div>

                    <!-- 评论数 -->
                    <div class="flex items-center group">
                        <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                        </svg>
                        <span class="group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors">
                            {{ artiles.commentCount }}
                        </span>
                    </div>

                </div>
                <div class="flex  text-gray-500 p-2 dark:group-hover:text-gray-300 transition-colors">
                    <span class="">全文共 132 字</span>
                    <!-- 分隔竖线 -->
                    <div class="ml-2 mr-2 h-6 w-px bg-gray-200 dark:bg-gray-600"></div>
                    <span>大概需要12分钟</span>
                </div>
            </div>
        </div>


        <div class="md:w-2/3 w-full flex-1 min-h-0"> <!-- 关键修改 -->
            <MdPreview previewTheme="github" :modelValue="ArticleContent?.content"
                class="p-6 h-full overflow-y-auto dark:bg-gray-800" :id="mev3_id"
                :theme="themeStatus.isDark ? 'dark' : 'light'" />
        </div>


        <!-- 转发文章 上一篇 下一篇文章   -->
        <div class="md:w-2/3 w-full mx-auto mt-12">
            <!-- 优化后的转发/上下篇/版权信息卡片，适配移动和暗色模式 -->
            <div
                class="relative rounded-xl bg-white/90 dark:bg-gray-900/90 border border-gray-200 dark:border-gray-700 shadow px-4 py-6 sm:px-8 sm:py-8 transition-colors">
                <!-- 上一篇（左上角，电脑端显示） -->
                <a href="#" class="absolute left-4 top-4 flex items-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 font-medium transition z-10
        md:left-6 md:top-6 hidden md:flex">
                    <svg class="w-5 h-5 mr-1 text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400 transition"
                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                    上一篇
                </a>
                <!-- 下一篇（右上角，电脑端显示） -->
                <a href="#" class="absolute right-4 top-4 flex items-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 font-medium transition z-10
        md:right-6 md:top-6 hidden md:flex">
                    下一篇
                    <svg class="w-5 h-5 ml-1 text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400 transition"
                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </a>

                <!-- 移动端横排按钮（仅移动端显示） -->
                <div class="flex justify-between items-center mb-4 md:hidden">
                    <a href="#"
                        class="flex items-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 font-medium transition">
                        <svg class="w-5 h-5 mr-1 text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400 transition"
                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                        </svg>
                        上一篇
                    </a>
                    <a href="#"
                        class="flex items-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 font-medium transition">
                        下一篇
                        <svg class="w-5 h-5 ml-1 text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400 transition"
                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </a>
                </div>

                <!-- 版权与作者信息（下方居中） -->
                <div class="flex flex-col items-center justify-center mt-12 mb-6 sm:mt-20 text-xs sm:text-sm gap-1">
                    <div class="text-gray-700 dark:text-gray-200 font-medium">文章地址：<sapn class=" text-sm text-gray-500">
                            wzy9858/article/content/1</sapn>
                    </div>

                    <div class="text-xs text-red-400 dark:text-red-300 font-semibold">本文禁止转载</div>

                    <div class="text-gray-500 dark:text-gray-400">
                        Copyright © 2025 菜鸟拯救世界
                    </div>
                </div>
            </div>
        </div>

        <!-- 这是评论区 -->
        <div class="w-full h-full md:w-2/3 mt-6">
            <Comment />
        </div>
    </div>
    <ArticlePageAside />

    <div v-if="catalogStatus.ArticleCatalog" class="fixed top-20 right-2 z-50 dark:text-white
      bg-white/60 dark:bg-gray-800/60 backdrop-blur-md rounded-xl shadow-lg p-4">
        <MdCatalog :editorId="mev3_id" :scrollElement="scrollElement" />
    </div>

</template>

<script setup lang="ts">
// 以下是导入的系统文件
import 'md-editor-v3/lib/preview.css';// preview.css相比style.css少了编辑器那部分样式
import { MdPreview, MdCatalog } from 'md-editor-v3';

import { ref, onMounted } from 'vue';
import { systemStatus, articlesStatus } from '../../ts/pinia';
import type { ArticleInter } from '../../ts/types/article';
import { useRoute } from 'vue-router'

// 以下是导入的组件
import Comment from '../../components/share/Comment.vue';
import ArticlePageAside from '../../components/articles/ArticlePageAside.vue';


// 以下是导入的相关请求
import { getArticleContentById } from '../../ts/axios/articles';
import type { ArticleContentInter } from '../../ts/types/article';

let route = useRoute()
const articleId = Number(route.params.id)
// --------------------------------------------------------------系统自带-----------------------

onMounted(async () => {
    ArticleContent.value = await getArticleContentById(articleId)
})

// --------------------------------------------------------------mdv3相关-----------------------
let themeStatus = systemStatus() // 主题状态
let catalogStatus = articlesStatus() // 文章目录是否展开
let artiles = ref({
    id: "10",
    title: "Linux命令6",
    subtitle: "常用Linux命令手册与使用技巧",
    author: "技术小站",
    time: "2023-10-20",
    tags: "系统运维/Linux",
    viewCount: "23",
    commentCount: "15"
})
const mev3_id = "wzy"
// 目录
const scrollElement = document.documentElement;
// --------------------------------------------------------------获取文章内容-----------------------
let ArticleContent = ref<ArticleContentInter>()

const scrollToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
}
</script>

<style scoped></style>